<template>
  <n-card title="已安装应用" :bordered="false">
    <n-grid cols="1 400:2 600:3 800:4" x-gap="12" y-gap="12">
      <n-gi v-for="app in installedApps" :key="app.id">
        <n-card hoverable>
          <template #header>
            <n-text strong>{{ app.name }}</n-text>
            <n-text depth="3" class="ml-2">({{ app.englishName }})</n-text>
          </template>

          <n-space vertical>
            <n-text>版本: {{ app.version }}</n-text>
            <n-text>安装时间: {{ app.installTime }}</n-text>
            <n-tag :type="app.status === '运行中' ? 'success' : 'default'">
              {{ app.status }}
            </n-tag>
          </n-space>

          <template #action>
            <n-button
              type="error"
              size="small"
              @click="handleUninstall(app)"
            >
              卸载
            </n-button>
          </template>
        </n-card>
      </n-gi>
    </n-grid>
  </n-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMessage } from 'naive-ui'

const message = useMessage()

// 已安装应用数据
const installedApps = ref([
  {
    id: 'app1',
    name: '平台管理系统',
    englishName: 'Platform Management System',
    version: '1.2.3',
    installTime: '2023-10-01',
    status: '运行中'
  },
  {
    id: 'app2',
    name: '视频转码工具',
    englishName: 'FFmpeg Video Transcoding Tool',
    version: '2.0.1',
    installTime: '2023-09-15',
    status: '已停止'
  },
  {
    id: 'app3',
    name: 'Nvidia显卡应用',
    englishName: 'Nvidia GPU Application',
    version: '3.1.0',
    installTime: '2023-10-10',
    status: '运行中'
  },
  {
    id: 'app4',
    name: 'ZLMediaKit',
    englishName: 'ZLMediaKit Streaming Server',
    version: '3.1.0',
    installTime: '2023-10-10',
    status: '运行中'
  },
  // 更多应用数据...
])

// 卸载应用
function handleUninstall(app) {
  message.success(`正在卸载 ${app.name}...`)
  // TODO: 调用卸载接口
  installedApps.value = installedApps.value.filter(item => item.id !== app.id)
}
</script>

<style scoped>
.n-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.n-card__action {
  margin-top: auto;
}
</style>
